<template>
    <div>
        <div class="good" v-for="(item,index) in cart" :key="item.id">
            {{ item.title }}
            <div class="right">
                <i class="cubeic-remove" @click="removeCart(index)"></i>
                <span>{{ item.cartCount }}</span>
                <i class="cubeic-add" @click="addCart(index)"></i>
            </div>
        </div>
        <div>总价 {{ total }}</div>
        <cube-button :disabled="true" v-if="total<minTotal">还差{{ minTotal - total }}可以购买</cube-button>
        <cube-button v-else>下单
            <span v-if="!isLogin">(需要登录)</span>
        </cube-button>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
    name: 'CartView',
    data() {
        return {
            minTotal: 1000
        }
    },
    computed: {
        ...mapState({
            cart: state => state.cart.list,
            isLogin: state => state.user.isLogin
        }),
        ...mapGetters({
            total: 'total'
        })
    },
    methods: {
        addCart(index) {
            this.$store.commit('cartadd', index)
        },
        removeCart(index) {
            this.$store.commit('cartremove', index)
        }
    }
}
</script>